<template>
	<view v-if="show" class="flex flex-row" :class="[loading ? 'opacity-5' : '']">
		<tm-translate @end="aniEnd" ref="anitag" name="zoom" reverse :autoPlay="false">
			<tm-sheet
				@click="onclick"
				:transprent="props.transprent"
				:color="props.color"
				_class="flex-row flex flex-row-center-center"
				:_style="customCSSStyle"
				:followTheme="props.followTheme"
				:followDark="props.followDark"
				:dark="props.dark"
				:round="props.round"
				:shadow="(props.checkable && checked_com) || !props.checkable ? props.shadow : 0"
				:outlined="props.checkable && !checked_com ? true : props.outlined"
				:border="props.border"
				:borderStyle="props.borderStyle"
				:borderDirection="props.borderDirection"
				:text="props.checkable && !checked_com ? true : props.text"
				:linear="props.linear"
				:linearDeep="props.linearDeep"
				:margin="props.margin"
				:padding="[wh.px, wh.py]"
				:border-color="props.borderColor"
				:linear-color="props.linearColor"
			>
				<tm-icon
					:color="_fontColor"
					v-if="props.icon && props.iconAlign == 'left'"
					:name="props.icon"
					:followDark="props.followDark"
					:fontSize="wh.fontSize"
					:dark="props.dark"
					:userInteractionEnabled="false"
				></tm-icon>

				<view class="flex-1 flex flex-center px-12">
					<slot name="default">
						<tm-text
							:color="_fontColor"
							:fontSize="wh.fontSize"
							:followDark="props.followDark"
							:userInteractionEnabled="false"
							:dark="props.dark"
							:label="props.label"
						></tm-text>
					</slot>
				</view>
				<view @click.stop="">
					<tm-icon
						:color="_fontColor"
						@click="closeTag"
						:followDark="props.followDark"
						v-if="props.closable && !loading"
						:_class="props.icon ? 'pl-10' : ''"
						:fontSize="wh.fontSize * 0.8"
						name="tmicon-times"
						:dark="props.dark"
					></tm-icon>
				</view>
				<tm-icon
					:color="_fontColor"
					v-if="props.icon && props.iconAlign == 'right'"
					:name="props.icon"
					:followDark="props.followDark"
					:fontSize="wh.fontSize"
					:dark="props.dark"
					:userInteractionEnabled="false"
				></tm-icon>
				<view :userInteractionEnabled="false" v-if="loading" class="pl-10 flex flex-center flex-row" style="line-height: 0">
					<tm-icon :color="_fontColor" :followDark="props.followDark" :fontSize="wh.fontSize * 0.8" name="tmicon-loading" spin :dark="dark">
					</tm-icon>
				</view>
			</tm-sheet>
		</tm-translate>
	</view>
</template>

<script lang="ts" setup>
/**
 * 标签
 */
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmApp from '../tm-app/tm-app.vue'
import tmText from '../tm-text/tm-text.vue'
import tmDivider from '../tm-divider/tm-divider.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
import tmTranslate from '../tm-translate/tm-translate.vue'
import { getCurrentInstance, computed, ref, provide, inject, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue'
import { cssstyle, tmVuetify } from '../../tool/lib/interface'
import { custom_props, computedClass, computedStyle } from '../../tool/lib/minxs'
// #ifdef APP-PLUS-NVUE
const Binding = uni.requireNativePlugin('bindingx')
const dom = uni.requireNativePlugin('dom')
// #endif
// 混淆props共有参数
const props = defineProps({
	...custom_props,
	followTheme: {
		type: [Boolean],
		default: true
	},
	transprent: {
		type: [Boolean],
		default: false
	},
	border: {
		type: [Number],
		default: 0
	},
	round: {
		type: [Number],
		default: 2
	},
	shadow: {
		type: [Number],
		default: 1
	},
	margin: {
		type: Array as PropType<Array<number>>,
		default: () => [10, 10]
	},
	padding: {
		type: Array as PropType<Array<number>>,
		default: () => [0, 0]
	},

	//是否开启标签可选中状态。
	checkable: {
		type: [Boolean],
		default: false
	},
	//只有当checkable为true时有效。
	checked: {
		type: [Boolean],
		default: false
	},
	//标签是否处于加载中。
	load: {
		type: [Boolean],
		default: false
	},
	//标签尺寸
	size: {
		type: String as PropType<'xs' | 's' | 'm' | 'n' | 'g' | 'lg'>,
		default: 'm' //xs|s|m|n|g|lg
	},
	fontSize: {
		type: [Number],
		default: 0
	},
	//是否允许关闭标签。
	closable: {
		type: [Boolean],
		default: false
	},
	//标签上显示图标。
	icon: {
		type: [String],
		default: ''
	},
	/**图标在文字的左还是右 */
	iconAlign: {
		type: String as PropType<'left' | 'right'>,
		default: 'left'
	},
	label: {
		type: [String],
		default: ''
	},
	fontColor: {
		type: String,
		default: ''
	},
	beforeClose: {
		type: Function,
		default: null
	}
})
const emits = defineEmits(['click', 'close', 'change', 'update:checked'])

const anitag = ref<InstanceType<typeof tmTranslate> | null>(null)
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props))
//自定类
const customClass = computed(() => computedClass(props))
//显示
const show = ref(true)
//是否选中。
const _checked_ = ref(false)
const _fontColor = computed(() => props.fontColor)
//是否加载中.
const loading = computed(() => props.load)
const checked_com = computed({
	get: function () {
		return _checked_.value
	},
	set: function (val: boolean) {
		_checked_.value = val
		emits('update:checked', _checked_.value)
	}
})
checked_com.value = props.checked
watch(
	() => props.checked,
	(newval) => {
		checked_com.value = newval
		emits('change', checked_com.value)
	}
)
const wh = computed(() => {
	if (props.size == 'xs') {
		return {
			px: props.padding[0] || 10,
			py: props.padding[1] || 4,
			fontSize: props.fontSize || 22
		}
	} else if (props.size == 's') {
		return {
			px: props.padding[0] || 14,
			py: props.padding[1] || 4,
			fontSize: props.fontSize || 24
		}
	} else if (props.size == 'm') {
		return {
			px: props.padding[0] || 16,
			py: props.padding[1] || 8,
			fontSize: props.fontSize || 26
		}
	} else if (props.size == 'n') {
		return {
			px: props.padding[0] || 18,
			py: props.padding[1] || 10,
			fontSize: props.fontSize || 28
		}
	} else if (props.size == 'g') {
		return {
			px: props.padding[0] || 20,
			py: props.padding[1] || 12,
			fontSize: props.fontSize || 32
		}
	} else if (props.size == 'lg') {
		return {
			px: props.padding[0] || 24,
			py: props.padding[1] || 16,
			fontSize: props.fontSize || 36
		}
	}
	return {
		px: props.padding[0],
		py: props.padding[1],
		fontSize: props.fontSize
	}
})

function onclick(e: TouchEvent | MouseEvent) {
	emits('click', e)
	if (loading.value) return
	checked_com.value = !checked_com.value
}
function aniEnd() {
	show.value = false
	emits('close')
}
async function closeTag(e: TouchEvent | MouseEvent) {
	if (loading.value) return
	e.stopPropagation()
	let p: Function | boolean = true
	if (typeof props.beforeClose == 'function') {
		p = await props.beforeClose()
		if (typeof p == 'function') {
			p = await p()
		}
		if (!p) return
	}
	if (anitag.value) {
		anitag.value.play()
	} else {
		show.value = false
		emits('close')
	}
}
</script>
